<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230228 10:05:59
 * @LastEditors lz
 * @LastEditTime 20230228 10:05:59
-->
<template>
    <div class="wp">
        <hdrModel Hierarchy="2" :ID="0"></hdrModel>
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value.FaultPointCollection"> -->
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value"> -->
        <div class="times" v-if="HomeContent.Default.FaultPoints.value">
            <span>00:{{ formattedMinutes }}:{{ formattedSeconds }}</span>  
        </div>
        <div class="Btn" @click="submit()" v-if="HomeContent.Default.ModeType.value == 3">
            提交
        </div>
        <div class="line_box">
            <img src="/colImages/dpb_b.png" class="Backlight">

            <span class="GearsValue">{{ HomeContent.Default.Gears.value }}</span>

        </div>
        <div class="speed_box">
            <span class="speedValue">{{ HomeContent.Default.Speed.value }}</span>
            <span class="unit">KM/h</span>
        </div>
        <div class="firing_box" :class="state.firing == true ? 'firing_box_true' : ''" @click="firing()"></div>

        <div class="BigM" :class="state.BM == true ? 'BigM_true' : ''" @click="BM()"> </div>

        <div class="vec_box">
            <span class="unit_vec">VEC</span>
        </div>
        <div class="delay">
            <span class="unit_delay">- delay -</span>
        </div>
        <div class="autoDri"></div>
        <div class="vehMal"></div>

        <div class="bn1"></div>
        <div class="bn2"></div>
        <div class="bn3"></div>
        <div class="bn4"></div>
        <div class="bn5"></div>
        <div class="bn6"></div>
        <div class="bn7"></div>

        <!-- 信息框 -->
        <div class="message_box">
            <p>1.请点击电源，启动车辆</p>
            <p>2.请点击M，接管车辆</p>
            <p>3.键盘Ctrl键切换档位 </p>
            <p>4.键盘W油门，A左转，S刹车，D右转</p>
            <p>5.请行驶到目标点：{{ state.anchorPoint.name }} <img class="anpt" src="/images/01.png"></p>
        </div>
        <div class="slider">
            <a-slider @change="sliderVal" v-model:value="value1" vertical :min="0" :max="1" :step="0.01" />
        </div>
        <messageBox ref="messageBoxRef" :Questions="'所有训练步骤皆已完成，请返回上级目录重新选择训练。'" :messageType="4" :ID="NaN"></messageBox>
    </div>
</template>

<script setup lang="ts">
import hdrModel from '../header/index.vue'
import SplashComponent from '@components/Splash/SplashComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import messageBox from '/src/components/Apps/Simulation/messageBox.vue'
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { useRouter } from 'vue-router'
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref, watch, computed } from 'vue'
import OrbitCameraComponent from '../../InertialNavigation/OrbitCameraComponent';
import HomeContent from '../HomeContent';
import { message } from 'ant-design-vue';
const router = useRouter()
const value1 = ref<number>(0.5);
const state = reactive({
    aperture: 0,
    SteeringDegree: 0,
    firing: false,
    BM: false,
    anchorPoint: <any>{},
});
let timer: Ref<number> = ref(-1);
let progressively: Ref<number> = ref(-1);
let advance: Ref<any> = ref(null);
let corner: Ref<any> = ref(null);

let ArrowLeftTimer: Ref<any> = ref(null);
let ArrowRightTimer: Ref<any> = ref(null);
let Reversion: Ref<any> = ref(null);

// document.onkeydown = function (e) {
//     // if (e.key == 'Alt') {
//     //     // console.log('Alt');
//     //     //驻车
//     //     WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlParkingRequest())
//     // }
//     // if (e.key == 'Control') {
//     //     //换挡
//     //     // console.log('Control');
//     //     WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlShiftGearsRequest())
//     // }
//     // //加速
//     // if (e.key == 'ArrowUp') {
//     //     window.clearInterval(progressively.value)
//     //     progressively.value = -1
//     //     if (state.aperture == 20) {
//     //         window.clearInterval(timer.value)
//     //         timer.value = -1
//     //         return
//     //     } else {
//     //         timer.value = window.setInterval(() => {
//     //             if (state.aperture == 20) {
//     //                 window.clearInterval(timer.value)
//     //                 timer.value = -1
//     //                 return
//     //             }
//     //             state.aperture = state.aperture + 1
//     //             // console.log(state.aperture);
//     //         }, 25)
//     //     }
//     // }
//     // //左转
//     // if (e.key == 'ArrowLeft') {

//     //     window.clearInterval(ArrowRightTimer.value)
//     //     ArrowRightTimer.value = null
//     //     window.clearInterval(ArrowLeftTimer.value)
//     //     ArrowLeftTimer.value = null
//     //     window.clearInterval(Reversion.value)
//     //     Reversion.value = null

//     //     if (state.SteeringDegree == 15) {
//     //         window.clearInterval(ArrowLeftTimer.value)
//     //         ArrowLeftTimer.value = null
//     //         return
//     //     } else {
//     //         ArrowLeftTimer.value = window.setInterval(() => {
//     //             if (state.SteeringDegree == 15) {
//     //                 window.clearInterval(ArrowLeftTimer.value)
//     //                 ArrowLeftTimer.value = null
//     //                 return
//     //             }
//     //             state.SteeringDegree = state.SteeringDegree + 1
//     //             console.log(state.SteeringDegree);
//     //         }, 25)
//     //     }
//     // }
//     // //右转
//     // if (e.key == 'ArrowRight') {

//     //     window.clearInterval(ArrowLeftTimer.value)
//     //     ArrowLeftTimer.value = null
//     //     window.clearInterval(ArrowRightTimer.value)
//     //     ArrowRightTimer.value = null
//     //     window.clearInterval(Reversion.value)
//     //     Reversion.value = null

//     //     if (state.SteeringDegree == -15) {
//     //         window.clearInterval(ArrowRightTimer.value)
//     //         ArrowRightTimer.value = null
//     //         return
//     //     } else {
//     //         ArrowRightTimer.value = window.setInterval(() => {
//     //             if (state.SteeringDegree == -15) {
//     //                 window.clearInterval(ArrowRightTimer.value)
//     //                 ArrowRightTimer.value = null
//     //                 return
//     //             }
//     //             state.SteeringDegree = state.SteeringDegree - 1
//     //             console.log(state.SteeringDegree);
//     //         }, 25)
//     //     }
//     // }
// }

// document.onkeyup = function (e) {
//     console.log(e, '松开');
//     //前进
//     window.clearInterval(timer.value)
//     timer.value = -1
//     window.clearInterval(progressively.value)
//     progressively.value = -1

//     //左右转
//     window.clearInterval(ArrowLeftTimer.value)
//     ArrowLeftTimer.value = null
//     window.clearInterval(ArrowRightTimer.value)
//     ArrowRightTimer.value = null
//     window.clearInterval(Reversion.value)
//     Reversion.value = null

//     if (e.key == 'ArrowUp') {
//         subtract()
//     }
//     if (e.key == 'ArrowLeft') {
//         subtractLeft()
//     }
//     if (e.key == 'ArrowRight') {
//         subtractLeft()
//     }
// }

function subtract() {

    // progressively.value = window.setInterval(() => {
    //     if (state.aperture == 0) {
    //         window.clearInterval(progressively.value)
    //         progressively.value = -1
    //         return
    //     } else {
    //         state.aperture = state.aperture - 1
    //         // console.log(state.aperture);
    //     }
    // }, 16)
}
function subtractLeft() {
    // Reversion.value = window.setInterval(() => {
    //     if (state.SteeringDegree == 0) {
    //         window.clearInterval(Reversion.value)
    //         Reversion.value = null
    //         return
    //     } else {
    //         if (state.SteeringDegree > 0) {
    //             state.SteeringDegree = state.SteeringDegree - 1
    //         }
    //         else if (state.SteeringDegree < 0) {
    //             state.SteeringDegree = state.SteeringDegree + 1
    //         }
    //     }
    //     console.log(state.SteeringDegree);
    // }, 16)
}
async function again() {
    // await HomeContent.Default.Awake()

    let Id = []
    Id = await AssetLoaderComponent.Default.LoadAllAsync(HomeContent.Default.MenuList.value.Asset);
    console.log(Id, '模型回调ID');
    //存贮Id
    HomeContent.Default.ResourceID.value = Id
    state.anchorPoint = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithSendInstanceIDRequest(Id))

    HomeContent.Default.ProgressText.value = '资源初始化'
    HomeContent.Default.ProgressVal.value = 75
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '场景初始化'
        HomeContent.Default.ProgressVal.value = 55
    }, 400);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 45
    }, 600);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 25
    }, 800);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载完成'
        HomeContent.Default.ProgressVal.value = 0
    }, 1000);
    setTimeout(async () => {
        HomeContent.Default.Loaded.value = false
    }, 1200);
    // let newData = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlStartRequest(Id[5]))
    // console.log(newData, '111111111111111');
    // 油门
    // advance.value = setInterval(() => {
    //     WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlSpeedUpRequest(state.aperture))
    // }, 1000)
    // //转角
    // corner.value = setInterval(() => {
    //     WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlTurnToRequest(state.SteeringDegree))
    // }, 1000)
    // HomeContent.Default.Loaded.value = false

}



// ============================================================================================
// 倒计时
// console.log("HomeContent.Default.Duration.value", HomeContent.Default.Duration.value);

const remainingTime = ref(HomeContent.Default.Duration.value * 1000);
// const remainingTime = ref(0.1 * 60 * 1000);

// let timer: any = null;
function startCountdown() {
  HomeContent.Default.timerControl.value = setInterval(() => {
    remainingTime.value -= 1000;
    if (remainingTime.value <= 0) {
      // 模拟一次点击提交
      submit();
      clearInterval(HomeContent.Default.timerControl.value);
      HomeContent.Default.timerControl.value = null;
    }
  }, 1000);
}
const formattedMinutes = computed(() => {
  const minutes = Math.floor(remainingTime.value / 60000);
  return minutes.toString().padStart(2, "0");
});

const formattedSeconds = computed(() => {
  const seconds = Math.floor((remainingTime.value % 60000) / 1000);
  return seconds.toString().padStart(2, "0");
});
// ===================================================================================================

//提交
function submit() {
    let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrainingAppraiseRequest())
    newArr.then((res) => {
        console.log(res, '提交返回值');
        HomeContent.Default.ScoreDetails.value = res
        router.push('summaryPage')
    })
}
function sliderVal(val: any) {
    WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlTopViewScalingRequest(val))
}
async function firing() {
    state.firing = !state.firing
    if (state.firing == false) {
        state.BM = false
    }
    let newData = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlStartRequest(state.firing))
    console.log(newData, '启动');
}
function BM() {
    if (state.firing) {
        state.BM = !state.BM
        let newData = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.VehicleControlTakeOverRequest(state.BM))
        console.log(newData, '接管');
    } else {
        message.error('请先启动车辆');
    }
}
const messageBoxRef = ref<any>();
//监听考核完成回调
watch(() => HomeContent.Default.RelaySequence.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        messageBoxRef.value.showModel()
    }
})
onMounted(function () {
    again()
    // clearInterval(timer.value)
    // clearInterval(advance.value)
    // clearInterval(corner.value)
    // SplashComponent.Default.InitializeAsync()
    startCountdown()
});

</script>

<style scoped>
.times {
    position: absolute;
    left: 69%;
    top: 18px;
    float: left;
    line-height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-right: 10px;
}
.wp {
    width: 100%;
    height: 100%;
    position: relative;
    /* background-color: #000; */
    background-color: transparent;
    background-image: url('/colImages/parallel_b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.line_box {
    width: 150px;
    height: 143px;
    background-image: url('/colImages/line.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 65px;
    left: 885px;
    text-align: center;
    line-height: 124px;
}

.Backlight {
    width: 50px;
    height: 31px;
    position: absolute;
    left: 50px;
    top: 47px;
}

.speed_box {
    width: 170px;
    height: 170px;
    background-image: url('/colImages/kmh_b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 42px;
    left: 487px;
    text-align: center;
    padding-top: 48px;
}

.vec_box {
    width: 170px;
    height: 170px;
    background-image: url('/colImages/kmh_b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 42px;
    right: 497px;
}

.firing_box {
    width: 123px;
    height: 123px;
    background-image: url('/colImages/close_1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 82px;
    right: 737px;
}

.firing_box_true {
    background-image: url('/colImages/close_2.png');
}

.unit {
    font-size: 20px;
    font-weight: 500;
    color: #00F6FF;
    position: absolute;
    bottom: 40px;
    left: 61px;
}

.unit_vec {
    font-size: 20px;
    font-weight: 500;
    color: #00F6FF;
    position: absolute;
    bottom: 40px;
    left: 67px;
}

.BigM {
    width: 123px;
    height: 123px;
    background-image: url('/colImages/ss_1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 82px;
    left: 729px;
}

.BigM:hover {
    background-image: url('/colImages/ss_2.png');
}

.BigM_true {
    background-image: url('/colImages/ss_2.png');
}

.autoDri {
    width: 194px;
    height: 194px;
    position: absolute;
    right: 283px;
    bottom: 17px;
    background-image: url('/colImages/zdjs1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.vehMal {
    width: 194px;
    height: 194px;
    position: absolute;
    right: 100px;
    bottom: 0px;
    background-image: url('/colImages/clgz.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.delay {
    width: 151px;
    height: 151px;
    position: absolute;
    left: 283px;
    bottom: 20px;
    background-image: url('/colImages/delay_b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.unit_delay {
    position: absolute;
    bottom: 46px;
    left: 40px;
    font-size: 20px;
    font-weight: 500;
    color: #00F6FF;
}

.bn1 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 662px;
    bottom: -10px;
    background-image: url('/colImages/bn1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn1:hover {
    background-image: url('/colImages/bn1_1.png');
}

.bn2 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 748px;
    bottom: -1px;
    background-image: url('/colImages/bn2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn2:hover {
    background-image: url('/colImages/bn2_1.png');
}

.bn3 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 833px;
    bottom: 4px;
    background-image: url('/colImages/bn3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn3:hover {
    background-image: url('/colImages/bn3_1.png');
}

.bn4 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 918px;
    bottom: 7px;
    background-image: url('/colImages/bn4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn4:hover {
    background-image: url('/colImages/bn4_1.png');
}

.bn5 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 999px;
    bottom: 4px;
    background-image: url('/colImages/bn5.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn5:hover {
    background-image: url('/colImages/bn5_1.png');
}

.bn6 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 1084px;
    bottom: -1px;
    background-image: url('/colImages/bn6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn6:hover {
    background-image: url('/colImages/bn6_1.png');
}

.bn7 {
    width: 84px;
    height: 84px;
    position: absolute;
    left: 1170px;
    bottom: -10px;
    background-image: url('/colImages/bn7.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bn7:hover {
    background-image: url('/colImages/bn7_1.png');
}

.speedValue {
    font-size: 36px;
    font-weight: 500;
    color: #FFFFFF;
    z-index: 999;
}

.GearsValue {
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
}

.message_box {
    width: 458px;
    height: 258px;
    position: absolute;
    left: 72px;
    bottom: 256px;
    background-color: rgba(3, 28, 69);
    z-index: -1;
    color: #fff;
    padding: 20px;
    font-size: 18px;
}

.Btn {
    position: absolute;
    left: 75%;
    top: 16px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/images/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -7px;
    margin-right: 10px;
}

.Btn:hover {
    color: #fff;
    background-image: url('/images/btn_bg_select.png');
}

.slider {
    position: absolute;
    right: 90px;
    bottom: 300px;
    height: 180px;
}

.anpt {
    width: 46px;
    margin-top: -20px;
}

.BigM_true {}
</style>